<template>
  <view :class="['tree-select-wrap', overflowScroll ? 'scroll' : '']">
    <!-- 自定义的选择控件 -->
    <van-tree-select :items="categoryList" v-model="activeIndex" v-if="subIndex === -1">
      <template #content>
        <div class="tree-select-body"
          v-if="subIndex == -1 || !categoryList[activeIndex].children || !categoryList[activeIndex].children.length">
          <div class="top-title flex-wrap" v-if="index >= 0" @click.stop="callback">
            <span class="mr10 nowrap"><uni-icons type="left" size="16"></uni-icons>返回</span>
            <span>{{ title }}</span>
          </div>
          <button class="top-button" @click="cateMore(categoryList[activeIndex])">全部<uni-icons type="right"
              size="16"></uni-icons></button>
          <template
            v-if="categoryList[activeIndex] && categoryList[activeIndex].children && categoryList[activeIndex].children.length > 0">
            <div class="cate-wrap" v-for="(item, index) in categoryList[activeIndex].children" :key="index">
              <div class="cate-top">
                <div class="cate-name flex-item">{{ item.name }}</div>
                <div class="cate-more" @click="cateMore(item)">全部 <uni-icons type="right" size="16"></uni-icons></div>
              </div>
              <div class="cate-child" v-if="item.children">
                <CustomSelect :mr0Number="3" v-model="selectCateTypes" :options="item.children" :currentIndex="index"
                  @change="cateChange">
                </CustomSelect>
              </div>
            </div>
          </template>
        </div>
      </template>
    </van-tree-select>
    <CustomTreeSelect :categoryList="categoryList[activeIndex].children[subIndex].children" :index="thirdIndex"
      :title="currentTitle" @resetIndex="resetIndex" @changeCategory="cateMore"
      v-else-if="thirdIndex >= 0 && subIndex >= 0 && categoryList[activeIndex].children[subIndex] && categoryList[activeIndex].children[subIndex].children">
    </CustomTreeSelect>
  </view>
</template>

<script setup>
import { ref, watch, computed, onMounted } from 'vue';
import { parse, stringify } from '@/assets/js/util';
import CustomSelect from '@/components/common/CustomSelect';
import VanTreeSelect from '@/components/vant/van-tree-select/van-tree-select.vue'; // 假设你有这个组件

const props = defineProps({
  title: { // 选中的标题
    type: String, default: ''
  },
  index: { // 选中的index
    type: Number, default: -1
  },
  activeIndexArr: { // 选中的index
    type: Array, default: () => []
  },
  categoryList: {
    type: Array, default: () => []
  },
  overflowScroll: {
    type: Boolean, default: false
  },
});
onMounted(() => {
  console.log(`=>(CustomTreeSelect.vue:62) props.categoryList`, props.categoryList);
})

const emit = defineEmits(['changeIndex', 'changeCategory', 'resetIndex']);

const activeIndex = ref(props.index >= 0 ? props.index : 0);
const subIndex = ref(-1);
const thirdIndex = ref(-1);
const selectCateTypes = ref([]);

const currentTitle = computed(() => {
  let title = props.categoryList[activeIndex.value].name + '/' + props.categoryList[activeIndex.value].children[subIndex.value].name;
  return props.title ? props.title + '/' + title : title;
});

watch(() => props.index, (val) => {
  activeIndex.value = val;
});

watch(() => props.activeIndexArr, (val) => {
  activeIndex.value = val[0];
});
watch(() => activeIndex.value, (val) => {
  changeIndex([], props.categoryList[val].id)
});
const cateChange = (val, arr, index, i) => {
  console.log(`=>(CustomTreeSelect.vue:85) val`, val);
  if (props.index < 0) {
    subIndex.value = index;
    thirdIndex.value = i;
  } else {
    cateMore(arr[0]);
  }
  emit('changeIndex', [activeIndex.value].concat(val), arr[0].id, props.categoryList[activeIndex.value]);
};

const resetIndex = (item, arr, index, i) => {
  selectCateTypes.value = [];
  subIndex.value = -1;
  thirdIndex.value = -1;
};

const changeIndex = (val, id) => {
  console.log(`=>(CustomTreeSelect.vue:101) val`, val);
  emit('changeIndex', [activeIndex.value].concat(val), id, props.categoryList[activeIndex.value]);
};

const cateMore = (data) => {
  console.log(`=>(CustomTreeSelect.vue:105) data`, data);
  emit('changeCategory', data);
};

const callback = () => {
  emit('resetIndex');
};

</script>

<style lang="scss" scoped>
.tree-select-wrap.scroll {
  overflow-x: scroll;
}

.van-tree-select__nav {
  min-width: 80px;
  flex: inherit;
}

.van-tree-select {
  height: 460px !important;

  .tree-select-body {
    min-width: 150px;
    padding: 5px 15px 15px;
  }
}

.top-title {
  font-size: 30rpx;
  padding: 10px 0 15px;
}

.top-button {
  width: 100%;
  background: #fff;
}

.cate-wrap {
  padding: 5px 0 0;
}

.cate-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0;

  .cate-name {
    height: 26px;
    line-height: 26px;
    font-size: 16px;
    font-weight: 600;
  }

  .cate-more {
    font-size: 12px;
    color: #666666;
  }
}
</style>